<!DOCTYPE html>
<html>
  <head>
    <title>Hello, transition!</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <style type="text/css">

body {
  font: 14px Helvetica Neue;
  text-rendering: optimizeLegibility;
  margin: 1em;
}

div {
  font-size: 42px;
  margin-top: .5em;
  background-color: steelblue;
  color: white;
  text-align: right;
}

    </style>
  </head>
  <body>
    Your lucky number is:<br>
    <div></div>
    <script type="text/javascript">

transform();

function transform() {
  d3.select("div")
      .style("width", "0%")
      .style("background-color", "steelblue")
      .text("hello\u00a0")
    .transition()
      .ease("bounce")
      .duration(2000)
      .style("width", "100%")
      .style("background-color", "brown");
}

window.addEventListener("keypress", transform, false);

    </script>
  </body>
</html>
